<template>
  <div
    class="usercenter-box common-usercenter-box"
    style="min-height: 900px;">
    <div class="common-items-header" style="padding:10px;">
      <h6 class="common-title">充值记录</h6>
      <div class="layui-btn-group">
        <nuxt-link class="layui-btn layui-btn-normal layui-btn-sm" to="/charge4">
          返回充值页面
        </nuxt-link>
      </div>
    </div>

    <div class="mycollectbox" style="padding: 10px 0px">
      <el-form
        class="charge-query-form"
        inline :model="queryParams">
        <el-form-item label="查询条件：">
          <el-select
            v-model="queryParams.orderMethod">
            <el-option
              v-for="item in orderOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-input
            v-model="queryParams.paySn"
            placeholder="请输入关键字">
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-select
            v-model="queryParams.payState"
            placeholder="全部支付状态">
            <el-option
              v-for="item in checkOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select
            v-model="queryParams.rechargeModeID"
            placeholder="全部支付方式">
            <el-option
              v-for="item in payOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <br/>
        <el-form-item
          label="查询时间："
          class="charge-query-form--time">
          <el-date-picker
            v-model="queryParams.queryTime"
            type="daterange"
            range-separator="-"
            format="yyyy-MM-dd"
            start-placeholder="开始时间"
            end-placeholder="结束时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-select
            v-model="queryDiffTime"
            placeholder=""
            @change="queryTimeDiff">
            <el-option
              v-for="item in timeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="doQuery">确认查询</el-button>
        </el-form-item>

      </el-form>
      <!-- <form onsubmit="return false;" class="layui-form">
			<div class="layui-form-item" style="margin-bottom: 5px;">
				<div class="layui-inline" style="width: 180px;">
          <select-filter
            ref="s1"
            name="查询条件"
            :options="selectOptions">
          </select-filter>

          <el-select
            v-model="queryParams.payState"
            placeholder="全部支付状态">
            <el-option
              v-for="item in checkOptions"
              :key="item.value"
              :value="item.value">
              {{ item.label }}
            </el-option>
          </el-select>

          <el-select
            v-model="queryParams.rechargeModeID"
            placeholder="全部支付状态">
            <el-option
              v-for="item in payOptions"
              :key="item.value"
              :value="item.value">
              {{ item.label }}
            </el-option>
          </el-select>

				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">查询时间</label>
				<div class="layui-inline" style="width: 180px;">
					<input type="text" name="_time_range" class="layui-input" placeholder="请选择查询时间" id="searchtime" lay-key="1">
				</div>
				<div class="layui-inline" style="width: 180px;">
					<select id="quick_date" lay-verify="required" lay-filter="quick_date" name="">
						<option data-type="afterDay" value="0">今日</option>
						<option data-type="afterDay1" value="-1">昨天</option>
						<option data-type="afterDay" value="-7">近一周</option>
						<option data-type="afterDay" value="-30">近一月</option>
						<option data-type="afterDay" value="-90">近三月</option>
					</select>
          <div class="layui-unselect layui-form-select">
            <div class="layui-select-title">
              <input
                type="text"
                placeholder="请选择"
                value="今日"
                readonly=""
                class="layui-input layui-unselect"
                name="">
              <i class="layui-edge"></i>
            </div>
            <dl class="layui-anim layui-anim-upbit">
              <dd lay-value="0" class="layui-this">今日</dd>
              <dd lay-value="-1" class="">昨天</dd>
              <dd lay-value="-7" class="">近一周</dd>
              <dd lay-value="-30" class="">近一月</dd>
              <dd lay-value="-90" class="">近三月</dd>
            </dl>
          </div>
				</div>
				<div class="layui-inline">
					<button
            class="layui-btn layui-btn-normal"
            lay-submit=""
            lay-filter="submit"
            id="submit">
            确认查询
          </button>
				</div>
			</div> -->

    <!-- </form> -->

    <el-table v-loading="isLoading" :data="tableData" style="width: 100%">
      <el-table-column label="提交时间" width="180">
        <template v-if="row.createTime" slot-scope="{ row }">
          {{ row.createTime | dateFormat }}
        </template>
      </el-table-column>
      <el-table-column prop="rechargeName" label="支付方式"></el-table-column>
      <el-table-column
        prop="paySn"
        label="商户单号"
        width="210"
      ></el-table-column>
      <el-table-column prop="payMoney" label="支付金额">
      </el-table-column>
      <el-table-column label="支付状态">
        <template slot-scope="{ row }">
          {{ payMap[row.payState] }}
        </template>
      </el-table-column>
      <el-table-column label="返回或处理备注"></el-table-column>
    </el-table>
    <section style="text-align: right;margin-top: 10px;">
      <el-pagination
        background
        layout="prev, pager, next, jumper"
        :page-size="query.pageSize"
        :total="dataTotal"
        @current-change="pageChage"
      >
      </el-pagination>
    </section>
    <orderDetailDialog ref="detail"></orderDetailDialog>
    </div>
  </div>
    <!-- <div class="usercenter-box">
      <div class="common-usercenter-box">
        <h6 class="common-title">我的订单记录</h6>
        <div class="myorderbox common-form-set">
          <div class="filter">
            <el-button class="query" type="primary" @click="doQuery">查询</el-button>
            <select-filter
              ref="s1"
              name="查询条件"
              :options="selectOptions"
            ></select-filter>
            <check-filter
              ref="c1"
              name="支付状态"
              :options="checkOptions"
            ></check-filter>
            <check-filter
              ref="c2"
              name="支付方式"
              :options="payOptions"
            ></check-filter>
            <date-filter ref="d1"></date-filter>
          </div>
        </div>


    </div>
      </div> -->
</template>

<script>
import CheckFilter from '@/components/checkFilter'
import DateFilter from '@/components/dateFilter'
import SelectFilter from '@/components/selectFilter'
import orderDetailDialog from '@/components/orderDetailDialog'
import pageMixin from '@/mixins/page'
import { dateFormat, getTime } from '@/common/utils'
const checkOptions = [
  {
    value: 0,
    label: '等待支付'
  },
  {
    value: 1,
    label: '支付失败'
  },
  {
    value: 2,
    label: '支付成功'
  },
  {
    value: 3,
    label: '退款'
  }
]
const payMap = {}
checkOptions.forEach((item) => {
  payMap[item.value] = item.label
})
const orderOptions = [
  {
    value: 'paySn',
    label: '商户单号'
  }
]
const selectOptions = [
  {
    type: 'select',
    key: 'type',
    options: [
      {
        value: 'paySn',
        label: '商户单号'
      }
    ]
  },
  { type: 'input', key: 'typeValue', placeholder: '请输入关键字', width: 300 }
]
const timeOptions = [
  {
    value: 0,
    label: '昨天'
  },
  {
    value: 1,
    label: '今天'
  },
  {
    value: 2,
    label: '本周'
  },
  {
    value: 3,
    label: '本月'
  },
  {
    value: 4,
    label: '近一月'
  },
  {
    value: 5,
    label: '近三月'
  },
]
export default {
  layout: 'webIn4',
  components: {
    CheckFilter,
    DateFilter,
    SelectFilter,
    orderDetailDialog
  },
  mixins: [pageMixin],
  async asyncData({ $axios }) {
    let payOptions = []
    const res = await $axios.get('/finance/rechargeMode/getListForClient', {
      params: {
        rechargeType: 1
      }
    })
    if (res.code === 1001 && res.body) {
      payOptions = res.body.map((item) => {
        return { value: item.rechargeModeID, label: item.rechargeName }
      })
    }
    return {
      payOptions
    }
  },
  data() {
    return {
      payMap,
      checkOptions,
      selectOptions,
      orderOptions,
      timeOptions,
      isLoading: true,
      queryParams: {
        orderMethod: 'paySn',
        paySn: '',
        payState: '',
        rechargeModeID: '',
        queryTime: '',
      },
      queryDiffTime: 1,
      query: {},
      tableData: []
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    queryTimeDiff(value) {
      const curDate = new Date()
          , startDate = {
            0: getTime(1),
            1: getTime(0),
            2: getTime(curDate.getDay()),
            3: getTime(curDate.getDate()-1),
            4: getTime(30),
            5: getTime(90),
          }[value]
      console.log(value, startDate)
      this.queryParams.queryTime = [startDate, curDate]
    },
    async getList() {
      this.isLoading = true
      const res = await this.$axios.post(
        '/finance/rechargeRecord/recordPage',
        null,
        {
          params: this.query
        }
      )
      if (res.code === 1001 && res.body) {
        this.tableData = res.body.records || []
        this.dataTotal = res.body.total
      }
      this.isLoading = false
    },
    doQuery() {
      let [createTimeStart, createTimeEnd] = this.queryParams.queryTime
      if(createTimeStart) {
        createTimeStart = dateFormat(createTimeStart.getTime())
      }
      if(createTimeEnd) {
        createTimeEnd = dateFormat(createTimeEnd.getTime())
      }
      const queryParams = JSON.parse(JSON.stringify(this.queryParams))
      queryParams.createTimeStart = createTimeStart || ''
      queryParams.createTimeEnd = createTimeEnd || ''
      delete queryParams.queryTime
      delete queryParams.orderMethod
      Object.keys(queryParams).forEach(key => {
        if(!queryParams[key] && queryParams[key !== 0]) {
          delete queryParams[key]
        }
      })
      this.query = Object.assign(this.query, queryParams)
      this.getList()
    }
  }
}
</script>

<style lang="scss" scoped>
// @import 'assets/style/layer.css';
@import 'assets/style/layui.css';
@import 'assets/style/style7/common.css';
// @import 'assets/style/style7/laydate.css';
// @import 'assets/style/style7/style.css';
// @import 'assets/style/style7/font_1451715_0505c2bxv7b7.css';

.layui-table-view .layui-table {
  width: 100%;
}

</style>

<style lang="scss">
.usercenter-box .charge-query-form {
  margin-left: 70px;
  .el-button {
    padding: 12px 20px;
  }
  .el-form-item {
    margin-bottom: 10px;
  }
  .el-input__inner {
    width: 180px;
  }

  &--time {

    // width: 316px;
    .el-select-dropdown__item {
      padding-left: 30px;
    }
    .el-input__inner {
      // width: 227px;
    }
  }
}
</style>
<style>
@import 'assets/style/el-adapter.css';
</style>
